<template>
	<view>
		<view class="navbar">
			<text class="title">全部服务</text>
			<view class="search">
				<u-icon name="search" class="icon"></u-icon>
				<input type="text" placeholder="请输入搜索服务项名称" v-model="value">
				<button @click="search">搜索</button>
			</view>
		</view>
		<view class="main">
			<scroll-view scroll-y="true" class="left">
				<view class="tap">
					<view class="tap-item" :class="index === activeIndex ? 'active' : ''"
						v-for="(item, index) in typeList" @click="onchange(index)">{{item}}</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="right">
				<view class="selectList">
					<navigator url="" class="select-item" v-for="item in selectList">
						<image :src="baseUrl + item.imgUrl" mode=""></image>
						<text>{{item.serviceName}}</text>
					</navigator>
				</view>
			</scroll-view>
		</view>
		<!-- <u-popup v-model="show" mode="bottom">
			<view class="searchList">
				<navigator url="" class="search-item" v-for="item in searchList">
					<image :src="baseUrl + item.imgUrl" mode=""></image>
					<text>{{item.serviceName}}</text>
				</navigator>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				typeList: [],
				activeIndex: 0,
				serviceList: [],
				selectList: [],
				baseUrl: 'http://124.93.196.45:10001/',
				show: false,
				searchList: []
			};
		},
		onLoad() {
			this.getCateData()
		},
		methods: {
			async getCateData() {
				const res = await this.$http({
					url: '/prod-api/api/service/list'
				})
				console.log(res)
				this.serviceList = res.data.rows
				console.log(this.serviceList)
				this.typeList = res.data.rows.map(item => item.serviceType)
				this.typeList.forEach((item, index) => {
					if (item === null) {
						this.typeList.splice(index, 1)
					}
				})
				const set = new Set(this.typeList)
				this.typeList = Array.from(set)
				console.log(this.typeList)
				// console.log(this.selectList)
				this.selectList = this.serviceList.filter(item => {
					return item.serviceType === this.typeList[this.activeIndex]
				})
				console.log(this.selectList)
			},
			onchange(index) {
				this.activeIndex = index
				this.selectList = this.serviceList.filter(item => item.serviceType === this.typeList[this.activeIndex])
				console.log(this.selectList)
			},
			search(){
				this.show = true
				this.searchList = this.serviceList.filter(item => item.serviceName.includes(this.value))
				console.log(this.searchList)
				this.selectList = this.searchList
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;

		view {
			height: 100%;
			display: flex;
			flex-direction: column;

			.navbar {
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 180rpx;

				.title {
					margin-top: 20rpx;
					color: #dd6161;
					font-weight: bold;
					font-size: 40rpx;
				}

				.search {
					width: 90%;
					border-radius: 50rpx;
					border: 1rpx solid #dd6161;
					display: flex;
					flex-direction: row;
					align-items: center;
					height: 64rpx;
					margin-top: 20rpx;
					position: relative;
					background-color: #f2f2f2;

					.icon {
						margin-left: 20rpx;
					}

					input {
						font-size: 28rpx;
						margin-left: 20rpx;
					}

					button {
						height: 95%;
						width: 120rpx;
						border-radius: 50rpx;
						background-color: #fa3534;
						font-size: 28rpx;
						text-align: center;
						display: flex;
						align-items: center;
						position: absolute;
						right: 2rpx;
						color: #fff;
					}
				}
			}

			.main {
				flex: 1;
				display: flex;
				flex-direction: row;

				.left {
					width: 180rpx;
					background-color: #F7F7F7;
					height: 100%;

					.tap {
						display: flex;
						flex-direction: column;

						.tap-item {
							height: 96rpx;
							font-size: 26rpx;
							color: #595c63;
							justify-content: center;
							align-items: center;
							position: relative;

							&::before {
								content: '';
								width: 50%;
								left: 25%;
								bottom: 0;
								position: absolute;
								border-top: 2rpx solid #e3e4e7;
							}
						}

						.active {
							color: #dd6161;
							font-size: 32rpx;
							font-weight: bold;

							&::after {
								content: '';
								position: absolute;
								left: 0;
								top: 0;
								width: 8rpx;
								height: 100%;
								background-color: #dd6161;
							}
						}
					}
				}
			}

			.right {
				width: 570rpx;
				height: 100%;

				.selectList {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;

					.select-item {
						width: 130rpx;
						height: 130rpx;
						padding: 20rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						image {
							width: 110rpx;
							height: 110rpx;
						}

						text {
							width: 100%;
							font-size: 22rpx;
							color: #666;
							margin-top: 10rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>